<!--
 * @Descripttion: 模具dashboard
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-10 01:58:11
-->
<template>
  <div
    class="dashboard-container"
    v-loading="moldDashboardParam.loading"
    :style="{ height: !!moldDashboardParam.loading ? '100%' : 'max-content' }"
  >
    <el-card
      class="el-card-bottom-top"
      v-for="moldDataType in Object.keys(moldDataTypeEnum)"
      :key="moldDataType"
    >
      <template #header>
        <span>{{ $t(`page.${moldDataType}`) }}</span>
      </template>
      <MoldDataTypeList
        :moldDataType="moldDataType"
        :dataArr="moldDashboardParam.dataMap[moldDataKeyMap[moldDataType]]"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue";
import { moldDataTypeEnum, moldDataKeyMap } from "./index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import MoldDataTypeList from "./moldDataTypeList/index.vue";
import Dile_APi from "@/api";

/**
 * @Author: xzh
 * @Descripttion: 模具仪表单参数
 * @Param:
 */
let moldDashboardParam = reactive<object_Inf>({
  loading: false,
  dataMap: {},
});

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
onMounted(() => {
  init();
});
/**
 * @Author: xzh
 * @Descripttion: 加载数据源
 * @Param:
 */
let init = async () => {
  let { loading, dataMap } = toRefs(moldDashboardParam);
  try {
    loading.value = true;
    dataMap.value = await Dile_APi.getMoldDashboard();
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  :deep(.vxe-table) {
    .vxe-table--header-wrapper,
    .vxe-table--body-wrapper {
      background-color: var(--background-color) !important;
    }
  }
}
</style>
